<script setup lang="ts"></script>

<template>
  <div class="home-advantage">
    <div class="container">
      <div class="title">
        <span class="left">云桥通的</span>
        <span class="right">优势</span>
      </div>
      <div class="content">
        <div class="design design_1">
          <span class="count">40+</span>
          <p>覆盖国家数量</p>
        </div>
        <div class="design design_2">
          <span class="count">300+</span>
          <p>海外POP点布局</p>
        </div>
        <div class="design design_3">
          <span class="count">2500+</span>
          <p>国内POP点数量</p>
        </div>
        <div class="design design_4">
          <span class="count">50T+</span>
          <p>网络吞吐量</p>
        </div>
        <div class="design design_5">
          <span class="count">15+</span>
          <p>多年行业经验</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home-advantage {
  margin-top: -64px;
  padding-bottom: 132px;
  width: 100%;
  display: flex;
  flex-direction: column;
  .title {
    text-align: center;
    font-size: 36px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 28px;
    letter-spacing: 4px;
    font-family: 'SourceHanSansCN-Normal';
    .left {
      color: #484848;
    }
    .right {
      font-weight: 700;
      /* 定义渐变色背景 */
      background: linear-gradient(to right, #5b9bc7, #3e5898);
      /* 设置背景剪切区域为文本 */
      -webkit-background-clip: text;
      /* 设置文本填充颜色为透明，只显示渐变色背景 */
      -webkit-text-fill-color: transparent;
    }
  }

  .content {
    margin-top: 16px;
    display: flex;
    justify-content: space-evenly;
    align-items: end;
    height: 200px;

    .design {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .count {
        font-family: 'SourceHanSansCN-Bold';
        font-size: 36px;
        font-weight: 700;
        font-stretch: normal;
        line-height: 1;
        letter-spacing: 2px;
        color: #091f5f;
      }
      p {
        font-family: 'SourceHanSansCN-Normal';
        font-size: 20px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 1;
        letter-spacing: 0px;
        color: #091f5f;
        padding: 10px 0;
      }
    }
    .design_1 {
      width: 205px;
      height: 194px;
      background-image: url('@/assets/images/home/design/pentagon.png');
      padding-top: 35px;
    }
    .design_2 {
      margin-bottom: 10px;
      width: 201px;
      height: 145px;
      background-image: url('@/assets/images/home/design/rectangle.png');
      padding-top: 8px;
    }
    .design_3 {
      width: 257px;
      height: 130px;
      background-image: url('@/assets/images/home/design/semicircle.png');
      padding-bottom: 24px;
    }
    .design_4 {
      width: 196px;
      height: 170px;
      background-image: url('@/assets/images/home/design/hexagon.png');
      padding-top: 16px;
    }
    .design_5 {
      margin-bottom: 10px;
      width: 208px;
      height: 148px;
      background-image: url('@/assets/images/home/design/Irregular_graphics.png');
      padding-top: 10px;
    }
  }
}

@media screen and (min-width: 1201px) and (max-width: 1508px) {
  .home-advantage {
    margin-top: -30px;
    .container {
      width: 85%;
    }
  }
}

@media screen and (min-width: 1101px) and (max-width: 1200px) {
  .home-advantage {
    margin-top: -30px;
    .container {
      width: 95%;
    }
  }
}

@media screen and (min-width: 1001px) and (max-width: 1100px) {
  .home-advantage {
    margin-top: -30px;
    .container {
      width: 100%;
    }
  }
}

@media screen and (min-width: 680px) and (max-width: 1000px) {
  .home-advantage {
    padding-bottom: 230px;
    margin-top: 0px;
    .container {
      width: 100%;

      .content {
        flex-wrap: wrap;
      }
    }
  }
}

@media screen and (max-width: 679px) {
  .home-advantage {
    padding-bottom: 230px;
    margin-top: 0px;
    .container {
      width: 100%;

      .content {
        flex-wrap: wrap;
        .design_5 {
          display: none;
        }
      }
    }
  }
}
</style>
